{% extends "frame/tabpages.html" %}
{% block content %}
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5" id="id_searchCustomerForm">{% csrf_token %}
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" type="text" name="filter_name"  placeholder="客户名称" id="id_name">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" type="text" name="filter_contact" placeholder="联系人" id="id_contact">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" type="text" name="filter_phone" placeholder="联系电话" id="id_phone">
                            </div>
                            <div class="layui-inline layui-show-xs-block xxxListButton">
                                <!--不能用button,如果使用button的话,会发送两次请求.
                                    button 的type button默认为type的值为submit,submit会默认提交一次,
                                    再加上js里的提交就会出现重复提交的问题,把type的值改为button就可以解决问题了-->
                                <!--button class="layui-btn"  data-type="reload" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button-->
                                <a class="layui-btn"  id="searchBtn" data-type="reload" lay-submit=""><i class="layui-icon">&#xe615;</i>查询</a>
                                <a class="layui-btn"  id="resetBtn" data-type="reset" lay-submit=""><i class="layui-icon">&#xe666;</i>重置</a>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table id="id_customerlist" class="layui-table layui-form"  lay-filter="f_customerlist">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> 
{% include "frame/searchBindMode.html" %}
</body>
{% endblock %}

{% block jsscript %}
<script type="text/html" id="toolbarCustomerList">
    <div class="layui-btn-group xxxListButton">
        <a class="layui-btn layui-btn-danger" data-type="delAllChecked"><i class="layui-icon"></i>批量删除</a> 
        <a class="layui-btn" onclick="xadmin.open('添加用户','add',600,400)"><i class="layui-icon"></i>添加</a>
        <a class="layui-btn layui-btn-small" onclick="location.reload()" id= "id_refresh" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
</script>

<script type="text/html" id="toolbarOper">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
layui.use(['jquery','table'], function(){
    var table = layui.table;
    var $ = layui.$

    var loading = layer.load(0, {shade: false});
    table.render({
        elem: '#id_customerlist', 
        method: 'post',
        url: "{% url 'customer:show_customerList' %}", //数据接口
        height: 'full-180',
        page: true, //开启分页
        limit: 10,
        loading: true,
        toolbar: '#toolbarCustomerList',
        defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips',
            }],
        cols: [[ //表头
            {type: 'checkbox', width:'10%',},
            {type: 'numbers', title: '序号',         width:'10%', align:'center'},
            {field: 'name', title: '客户名称',   width:'20%', align:'center', sort: true},
            {field: 'contact',  title: '联系人',     width:'15%', align:'center', sort: true},
            {field: 'phone',    title: '联系电话',   width:'15%', align:'center', sort: true},
            {field: 'created',  title: '添加时间',   width:'15%', align:'center', sort: true},
            {title: '操作', toolbar: '#toolbarOper', width:'15%', align:'center'}
        ]],
        done:function(res){
            layer.close(loading);
        }
    });  
    
    table.on('tool(f_customerlist)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
            layer.confirm('确定要删除?', function(index){
                $.ajax({
                    type:'post',
                    url:"{% url 'customer:show_customerDel' 0 %}".replace('0', data.id),
                    data:{},
                    success:function(res){
                        if (res.code == 0)
                        {
                            layer.msg("删除成功!");
                            obj.del();
                            layer.close(index);
                        }

                    },
                    error:function(res)
                    {
                        layer.msg("删除失败!");
                    }
                });
            });
        } else if(obj.event === 'edit'){
            uri = obj.data.id + '/update'; 
            xadmin.open('编辑用户',uri,600,400);
        }

    });

    active = {
        delAllChecked: function(){ //获取选中数据
            var checkStatus = table.checkStatus('id_customerlist');
            data = checkStatus.data;
            data.forEach((item, index, array)=>{
                $.ajax({
                    type:'post',
                    url:"{% url 'customer:show_customerDel' 0 %}".replace('0', item.id),
                    data:{},
                    success:function(res){
                        if (res.code == 0)
                        {
                            layer.msg("删除成功!");
                            location.reload();
                        }
                    },
                    error:function(res)
                    {
                        layer.msg("删除失败!");
                    }
                });
            })
        },
        reload: function(){
            table.reload('id_customerlist', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                   filter_name: $("input[name=filter_name]").val(),
                   filter_contact: $("input[name=filter_contact]").val(),
                   filter_phone: $("input[name=filter_phone]").val()
                }
            });
        },
        reset: function(){
            $("#id_searchCustomerForm")[0].reset();
            $("#id_refresh").click();
        }
    };

    $('.xxxListButton .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});

</script>
{% endblock %}
